<script setup lang="ts">
import type { Component } from 'vue'

defineOptions({
  inheritAttrs: false,
})

withDefaults(
  defineProps<{
    title: string
    icon: Component
    disabled?: boolean
  }>(),
  {
    disabled: (props) => {
      const { getPowerByIcon } = usePagePower()
      return !getPowerByIcon(props.icon)
    },
  },
)

defineEmits<{
  (e: 'click'): void
}>()
</script>

<template>
  <ElTooltip :content="title" placement="top" effect="dark">
    <slot>
      <ElButton
        link
        :disabled="disabled"
        :icon="icon"
        style="margin: 3px"
        v-bind="$attrs"
        @click.stop="$emit('click')"
      />
    </slot>
  </ElTooltip>
</template>
]
